<!--ajax实现分页-->
<!--需要jq.js和ajax_page.php和ajax_del.php支持-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax-分页</title>
		<script src="jq/jquery.js" type="text/javascript"></script>
	</head>
	<body>
		<form action="ajax_del.php" method="post">	
		<table border="3px" cellspacing="0" cellpadding="2" width="80%" style="margin: 30px auto;">
			<tr>
				<th><input type="checkbox" onclick="allto()" name="a" id="all" />全选</th>
				<th>编号</th>
				<th>标题</th>
				<th>操作</th>
			</tr>
			<tr id="end">
				<td colspan="4" align="center">
					<button id="home" type="button">首页</button>
					<button id="prev" type="button">上一页</button>
					<button id="next" type="button">下一页</button>
					<button id="endd" type="button">尾页</button>
					<input type="submit" value="删除选中项"/>
				</td>
			</tr>			
		</table>
		</form>
	</body>
	<script type="text/javascript">
		var page=1;
		var total="";
		//初始加载显示
		window.onload=function(){
			$.ajax({
		  	  	url:"ajax_page.php",
		  	  	type:"post",
		  	  	data:"init="+1+"&total=total",
		  	  	dataType:"json",
		  	  	success:function(data){
		  	  		total=data[0].total;
		  	  		for(key in data){
			  	  		var trId=data[key].articleId;
			  	  		$("#end").before("<tr class='trdata' id="+trId+"><td><input type='checkbox' name='id[]' value="+trId+" /></td><td>"+data[key].articleId+"</td><td>"+data[key].title+"</td><td><a href='#' onclick='del("+trId+")'>删除</a></td></tr>");
		  	  		}
		  	  	}
		  	});
		}
		//首页
		$("#home").click(function(){
			$(".trdata").remove();
		  	$.ajax({
		  	  	url:"ajax_page.php",
		  	  	type:"post",
		  	  	data:"init="+1,
		  	  	dataType:"json",
		  	  	success:function(data){
		  	  		
		  	  		page=1;
		  	  		for(key in data){
			  	  		var trId=data[key].articleId;
			  	  		$("#end").before("<tr class='trdata' id="+trId+"><td><input type='checkbox' name='id[]' value="+trId+" /></td><td>"+data[key].articleId+"</td><td>"+data[key].title+"</td><td><a href='#' onclick='del("+trId+")'>删除</a></td></tr>");
		  	  		}
		  	  	}
		  	});
		})
		//上一页
		$("#prev").click(function(){
			$(".trdata").remove();
			if(page<=1){
				page=1;
				alert("已经是第一页了");
			}else{
				page=page-1;
			}
		  	$.ajax({
		  	  	url:"ajax_page.php",
		  	  	type:"post",
		  	  	data:"init="+page,
		  	  	dataType:"json",
		  	  	success:function(data){			  	  		
		  	  		for(key in data){
		  	  			var trId=data[key].articleId;
		  	  			$("#end").before("<tr class='trdata' id="+trId+"><td><input type='checkbox' name='id[]' value="+trId+" /></td><td>"+data[key].articleId+"</td><td>"+data[key].title+"</td><td><a href='#' onclick='del("+trId+")'>删除</a></td></tr>");
		  	  		}
		  	  	}
		  	});
		})
		//下一页		  
		$("#next").click(function(){
			$(".trdata").remove();
			if(page>=total){
				page=total;
				alert("已经是最后一页了");
			}else{
				page=page+1;
			}		  	
		  	$.ajax({
		  	  	url:"ajax_page.php",
		  	  	type:"post",
		  	  	data:"init="+page,
		  	  	dataType:"json",
		  	  	success:function(data){			  	  		
		  	  		for(key in data){
		  	  			var trId=data[key].articleId;
		  	  			$("#end").before("<tr class='trdata' id="+trId+"><td><input type='checkbox' name='id[]' value="+trId+" /></td><td>"+data[key].articleId+"</td><td>"+data[key].title+"</td><td><a href='#' onclick='del("+trId+")'>删除</a></td></tr>");
		  	  		}
		  	  	}
		  	});
		})
		//尾页	
		$("#endd").click(function(){	
			$(".trdata").remove();
			page=total;
		  	$.ajax({
		  	  	url:"ajax_page.php",
		  	  	type:"post",
		  	  	data:"init="+page,
		  	  	dataType:"json",
		  	  	success:function(data){			  	  		
		  	  		for(key in data){
		  	  			var trId=data[key].articleId;
		  	  			$("#end").before("<tr class='trdata' id="+trId+"><td><input type='checkbox' name='id[]' value="+trId+" /></td><td>"+data[key].articleId+"</td><td>"+data[key].title+"</td><td><a href='#' onclick='del("+trId+")'>删除</a></td></tr>");
		  	  		}
		  	  	}
		  	});
		})
		//删除
		function del(trId){
			var re=window.confirm("是否删除该项？");
			if(re){
				$.ajax({
					type:"post",
					url:"ajax_del.php",
					data:"id="+trId,
					dataType:"json",
					success:function(dataa){					
						$("#"+trId).remove();
						if(dataa>0){
							alert("删除成功！");
						}
					}				
				});
			}
		}
		//多选
		function allto(){
			var aa=document.getElementsByName("id[]");
			for (var i=0;i<aa.length;i++) {
				aa[i].checked=$("#all").get(0).checked;
			}
		}
	</script>
</html>